<template>
  <Dialogdrawerdefect :ddtvisible="visible" size="1040px" direction="rtl" :has-modal="true" :modal="true" :close-on-click-modal="true" @close="handleClose" :title="`${title}`">
    <div class="cont_box" v-loading="loading">
      <AppInfoTitle>
        <b class="fs-16">预约信息</b>
      </AppInfoTitle>
      <el-row>
        <el-col :span="12">
          <AppInfoItem label="排队号码">
            <span>
              <el-tag size="mini" v-if="appoInfo.callType" type="success">{{appoInfo.callType}}</el-tag>
              <b style="font-size: 16px; color: #00C0EF;line-height: 5px;">{{appoInfo.callId}}</b>
            </span>
          </AppInfoItem>
        </el-col>
        <el-col :span="12">
          <AppInfoItem label="预约日期" :txt="frtTime(appoInfo.scheduledDttm)"/>
        </el-col>
        <el-col :span="12">
          <AppInfoItem label="预约来源" :txt="appoInfo.appointmentType"/>
        </el-col>
        <el-col :span="12">
          <AppInfoItem label="预约时段" :txt="frtBETime()"/>
        </el-col>
        <el-col :span="12">
          <AppInfoItem label="登  记  人" :txt="appoInfo.registerDoctor"/>
        </el-col>
        <el-col :span="12">
          <AppInfoItem label="预约班次" :txt="appoInfo.medcine"/>
        </el-col>
        <el-col :span="12">
          <AppInfoItem label="呼叫次数" :txt="appoInfo.callNum"/>
        </el-col>
        <el-col :span="12">
          <AppInfoItem label="时 段 I D" :txt="appoInfo.appointmentListDmbId"/>
        </el-col>
      </el-row>
      <AppInfoTitle>
        <b class="fs-16">申请信息</b>
      </AppInfoTitle>
      <el-row>
        <el-col :span="12">
          <AppInfoItem label="患者姓名">
            <span>
              <b>{{appoInfo.patientName}}</b>
              <span>【{{appoInfo.patientSex}}】</span>
            </span>
          </AppInfoItem>
        </el-col>
        <el-col :span="12">
          <AppInfoItem label="患者年龄">
            <span>{{getPatAge(appoInfo.patientAge)}}</span>
          </AppInfoItem>
        </el-col>
        <el-col :span="12">
          <AppInfoItem label="联系方式" :txt="appoInfo.telephone || appoInfo.patientPhone"/>
        </el-col>
        <el-col :span="12">
          <AppInfoItem label="患者类型" :txt="appoInfo.patientType"/>
        </el-col>
        <el-col :span="12" v-if="!isMpiOrPid && applyInfoHospital != 'wzszxyy'">
          <AppInfoItem label="P  I  D" :txt="appoInfo.patientId"/>
        </el-col>
        <el-col :span="12" v-if="applyInfoHospital === 'wzszxyy'">
          <AppInfoItem :label="appoInfo.patientType === '体检' ? '体检号码' : (appoInfo.patientType === '住院' ? '住院号码' : (appoInfo.patientType === '门诊' ? '门诊号码': 'P  I  D 号'))">
            <span>{{appoInfo.patientId}}</span>
          </AppInfoItem>
        </el-col>
        <el-col :span="12" v-if="isMpiOrPid">
          <AppInfoItem label="PID" :txt="appoInfo.mpi"/>
        </el-col>
        <el-col :span="12">
          <AppInfoItem label="申请医生">
            <el-tag size="mini" v-if="appoInfo.applyDoctor && applyInfoHospital != 'wzszxyy'" :type="frStatus(appoInfo.checkStatus)">{{appoInfo.applyDoctor}}</el-tag>
            <b v-if="appoInfo.applyDoctor && applyInfoHospital === 'wzszxyy'">{{appoInfo.applyDoctor}}</b>
          </AppInfoItem>
        </el-col>
        <el-col :span="12">
          <AppInfoItem label="申请科室">
            <!-- <el-tag size="mini" v-if="appoInfo.applyDepartment">{{appoInfo.applyDepartment}}</el-tag> -->
            <span v-if="appoInfo.applyDepartment">{{appoInfo.applyDepartment}}</span>
          </AppInfoItem>
        </el-col>
        <el-col :span="12">
          <AppInfoItem label="开单时间" v-if="applyInfoHospital != 'wzszxyy'">
            <el-tag size="mini" :type="frStatus(appoInfo.checkStatus)">{{appoInfo.applyDateTime}}</el-tag>
          </AppInfoItem>
        </el-col>
        <el-col :span="12">
          <AppInfoItem label="申请单号" :txt="appoInfo.examNo"/>
        </el-col>
        <el-col v-if="applyInfoHospital != 'wzszxyy' && appoInfo.wardName" :span="12">
          <AppInfoItem label="病       区" :txt="appoInfo.wardName"/>
        </el-col>
        <el-col v-if="applyInfoHospital != 'wzszxyy' && appoInfo.bedNo" :span="12">
          <AppInfoItem label="床       号" :txt="appoInfo.bedNo"/>
        </el-col>
        <el-col :span="12">
          <AppInfoItem label="检查状态">
            <el-tag v-if="applyInfoHospital != 'wzszxyy'" size="mini" :type="frStatus(appoInfo.checkStatus)">{{appoInfo.checkStatus}}</el-tag>
            <b v-if="applyInfoHospital === 'wzszxyy'">{{appoInfo.checkStatus}}</b>
          </AppInfoItem>
        </el-col>
        <el-col :span="12">
          <AppInfoItem label="检查机房" :txt="appoInfo.callRoom"/>
        </el-col>
        <el-col :span="12">
          <AppInfoItem label="检查项目" :txt="appoInfo.checkpos"/>
        </el-col>
        <el-col :span="12">
          <AppInfoItem label="检查部位" :txt="appoInfo.registerpart"/>
        </el-col>
        <el-col :span="12">
          <AppInfoItem label="检查时间" :txt="appoInfo.checkDttm"/>
        </el-col>
        <el-col :span="12">
          <AppInfoItem label="检查设备" :txt="appoInfo.scheduledModality"/>
        </el-col>
        <el-col :span="12">
          <AppInfoItem label="检查部门" :txt="appoInfo.scheduledDep"/>
        </el-col>
        <el-col :span="12">
          <AppInfoItem label="检查医生" :txt="appoInfo.checkDoctor"/>
        </el-col>
        <el-col :span="12">
          <AppInfoItem label="检查类型" :txt="appoInfo.checkType">
          </AppInfoItem>
        </el-col>
        <el-col :span="12">
          <AppInfoItem :item-label-color="'red !important'" label="阳性" v-if="applyInfoHospital === 'wzszxyy' && appoInfo.positive && appoInfo.positive.length > 0">
            <span style="color: red;" :title="getPositive(appoInfo.positive)">{{appoInfo.positive && appoInfo.positive.length > 0 ? appoInfo.positive.join(',') : ''}}</span>
          </AppInfoItem>
        </el-col>
        <el-col :span="12">
          <AppInfoItem label="检查目的" max-height="24">
            <div style="max-width:200px;overflow-y:scroll;">{{appoInfo.examPurpose}}</div>
          </AppInfoItem>
        </el-col>
        <!--
        <el-col :span="12">
          <AppInfoItem label="检查部位" :txt="appoInfo.examPart"/>
        </el-col> -->
        <el-col :span="12">
          <AppInfoItem label="登记时间" :txt="frtTime(appoInfo.triggerDttm)"/>
        </el-col>
        <el-col :span="12">
          <AppInfoItem label="优先级别" :txt="appoInfo.grade"/>
        </el-col>
        <el-col :span="12">
          <AppInfoItem label="保密级别" :txt="appoInfo.privacyLevel"/>
        </el-col>
        <el-col :span="12">
          <AppInfoItem label="触发时间" :txt="appoInfo.triggerDate"/>
        </el-col>
        <el-col :span="12" v-if="applyInfoHospital === 'fuding'">
          <AppInfoItem label="门诊/住院/体检(号)">
            <span v-if="appoInfo.inpatientId != null && appoInfo.outPatientId === null && appoInfo.testPatientId === null">{{appoInfo.inpatientId}}</span>
            <span v-if="appoInfo.inpatientId != null && appoInfo.outPatientId && appoInfo.testPatientId === null">/</span>
            <span v-if="appoInfo.inpatientId === null && appoInfo.outPatientId">{{appoInfo.outPatientId}}</span>
            <!-- <span v-if="appoInfo.inpatientId && appoInfo.outPatientId && appoInfo.testPatientId === null">/</span>
            <span v-if="appoInfo.inpatientId === null && appoInfo.outPatientId">{{appoInfo.outPatientId}}</span> -->
          </AppInfoItem>
        </el-col>
        <el-col :span="12">
          <AppInfoItem label="访  问  号" :txt="appoInfo.accessionNo"/>
        </el-col>
        <el-col :span="12">
          <AppInfoItem label="收费状态">
            <el-tag size="mini" :type="appoInfo.chargeStatus == '已收费' ? 'success' : 'danger'">{{appoInfo.chargeStatus}}</el-tag>
          </AppInfoItem>
        </el-col>
        <el-col :span="12">
          <AppInfoItem label="金额" :txt="appoInfo.cost"/>
        </el-col>
        <el-col :span="12" v-if="appoInfo.scheduledDep =='内窥镜'">
          <AppInfoItem label="胃镜药物" :txt="appoInfo.gastroscopicMedicine"/>
        </el-col>
        <el-col :span="12" v-if="appoInfo.scheduledDep =='内窥镜'">
          <AppInfoItem label="药物" :txt="appoInfo.material"/>
        </el-col>
        <el-col v-if="applyInfoHospital === 'wzszxyy'" :span="12">
          <AppInfoItem label="申请时间" :txt="appoInfo.applyDateTime"/>
        </el-col>
        <el-col v-if="applyInfoHospital === 'wzszxyy'" :span="12">
          <AppInfoItem label="收费类型" :txt="appoInfo.feeType"/>
        </el-col>
        <el-col v-if="applyInfoHospital === 'wzszxyy' && appoInfo.wardName" :span="12">
          <AppInfoItem label="病       区">
            <span style="font-weight: bolder;">{{appoInfo.wardName}}</span>
          </AppInfoItem>
        </el-col>
        <el-col v-if="applyInfoHospital == 'wzszxyy' && appoInfo.bedNo" :span="12">
          <AppInfoItem label="床       号" :txt="appoInfo.bedNo"/>
        </el-col>
        <el-col :span="24" v-if="applyInfoHospital === 'wzszxyy' || hospitalCode == 'PDY10023X33030211A5121'">
          <!-- <AppInfoItem label="电子病史" :txt="appoInfo.diseasesHistory" min-height="60px"/> -->
          <!-- <span class="diseasesHistory" v-html="highlightedText(appoInfo.diseasesHistory)" :title="highlightedText(appoInfo.diseasesHistory)"></span> -->
          <AppInfoItem label="电子病史" :txt="highlightedText(appoInfo.diseasesHistory)" :is-html="isHtml" max-height="116"/>
        </el-col>
        <el-col :span="24" v-else>
          <AppInfoItem label="电子病史" :txt="appoInfo.clinicinfo || appoInfo.diseasesHistory" min-height="60px"/>
        </el-col>
        <el-col :span="24">
          <AppInfoItem label="注意事项" :is-html="isHtml" :min-height="examnotice? '100px' : '60px'" :txt="examnotice"/>
        </el-col>
        <el-col :span="24">
          <AppInfoItem label="发 票 号" :txt="appoInfo.invoiceNo" min-height="60px"/>
        </el-col>
        <el-col :span="24">
          <AppInfoItem label="主诉" :txt="appoInfo.chiefComplaint" min-height="60px" v-if="isShowChiefComplaint"/>
        </el-col>
        <el-col :span="24">
          <AppInfoItem label="备       注" :txt="appoInfo.remark" max-height="90"/>
        </el-col>
        <el-col :span="24">
          <AppInfoItem label="备      注2" :txt="appoInfo.remark2" max-height="90"/>
        </el-col>
        <el-col :span="24">
          <AppInfoItem label="备      注3" :txt="appoInfo.remarkInfo" max-height="90"/>
        </el-col>
        <el-col>
          <div class="list-change">
            <button :class="{ active: activeTab === 'tab1' }" @click="activeTab = 'tab1'">收费项目列表</button>
            <button :class="{ active: activeTab === 'tab2' }" @click="activeTab = 'tab2'">检查项目列表</button>
            <button v-show="isShowResult" :class="{ active: activeTab === 'tab3' }" @click="activeTab = 'tab3'">检验结果列表</button>
            <div v-show="activeTab === 'tab1'">
              <el-table
                :data="appoInfo.orderBill"
                style="width: 100%;">
                <el-table-column
                  prop="billName"
                  label="项目名称"
                  width="150"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="amount"
                  label="数量"
                  width="60"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="price"
                  label="金额"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="feeStatus"
                  label="收费状态"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="billCode"
                  label="收费代码"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="examItemNo"
                  label="医技序号"
                  align="center">
                </el-table-column>
              </el-table>
            </div>
            <div v-show="activeTab === 'tab2'">
              <el-table
                :data="appoInfo.examItemsSend"
                style="width: 100%;">
                <el-table-column
                  prop="examItemName"
                  label="检查项目"
                  width="200"
                  align="center"
                  show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                  prop="examPartMerge"
                  label="检查部位"
                  width="90"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="amount"
                  label="数量"
                  width="50"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="price"
                  label="金额"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="feeStatus"
                  label="收费状态"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="examItemCode"
                  label="项目代码"
                  width="100"
                  align="center"
                  show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                  prop="examItemNo"
                  label="医技序号"
                  align="center">
                </el-table-column>
              </el-table>
            </div>
            <div v-show="activeTab === 'tab3'">
              <el-table
                :data="appoInfo.listResult"
                style="width: 100%;">
                <el-table-column
                  prop="chineSename"
                  label="检验项目名称"
                  width="175"
                  align="center"
                  show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                  label="检验结果"
                  width="90"
                  align="center">
                  <template slot-scope="scope">
                    <span :style="{'color': scope.row.testResult === '阳性' ? 'red' : '#909399'}">{{scope.row.testResult}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="异常结果"
                  width="50"
                  align="center">
                  <template slot-scope="scope">
                    <span :style="{'color': scope.row.hint === '阳性' ? 'red' : '#909399'}">{{scope.row.hint}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="requestTime"
                  label="申请时间"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="executeTime"
                  label="申请确认时间"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="receiveTime"
                  label="标本接受时间"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="checkTime"
                  label="检验确认时间"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="examinaimCode"
                  label="大项目编码"
                  width="100"
                  align="center">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="buttons" style="width: 100%;">
        <div class="left-buttons">
          <el-button size="small" @click="handleClose">关 闭</el-button>
        </div>
      </div>
    </div>
  </Dialogdrawerdefect>
</template>
<script>
import { getlistResult } from '@/api/api.js'
import { mapGetters } from 'vuex'
import Dialogdrawerdefect from '@/components/dialogbox/dialogDrawer'
import AppInfoItem from '@/components/appInfoItem/index'
import AppInfoTitle from '@/components/appInfoTitle/index'
export default {
  name: 'EditDialog',
  components: {
    Dialogdrawerdefect,
    AppInfoItem,
    AppInfoTitle
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    appoInfo: {
      type: Object,
      default: () => {}
    },
    isShowResult: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.activeTab = this.isShowResult ? this.activeTab : (this.activeTab === 'tab3' ? 'tab1' : this.activeTab)
      }
    }
  },
  data() {
    return {
      hospitalCode: this.appoInfo.hospitalCode,
      isHtml: true,
      title: '预约详情',
      applyInfoHospital: window.g.applyInfoHospital,
      loading: false,
      // activeName: 'first',
      isMpiOrPid: window.g.isMpiOrPid,
      activeTab: 'tab1',
      positives: [
        {
          label: 'hcv',
          text: '丙型病毒性肝'
        },
        {
          label: 'hiv',
          text: '艾滋病'
        },
        {
          label: 'rpr',
          text: '梅毒'
        },
        {
          label: 'hbsag',
          text: '乙型肝炎病毒表面抗原'
        },
        {
          label: 'PRG',
          text: '血清胃功能'
        },
        {
          label: 'SCR',
          text: '肌酐'
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['examnotice']),
    visible: {
      get() {
        return this.dialogVisible
      },
      set(val) {
        this.$emit('update:dialogVisible', val)
      }
    },
    appConfig() {
      return this.$store.state.settings.appConfig
    },
    isShowChiefComplaint() {
      return (this.$store.state.user.appSetting && this.$store.state.user.appSetting.isUseChiefComplaint) || false
    }
  },
  created() {
    console.log('hospitalCode=>', this.hospitalCode)
    this.isMpiOrPid = this.appConfig && this.appConfig.baseConfig && this.appConfig.baseConfig.mpi || window.g.isMpiOrPid
  },
  methods: {
    getlistResults() {
      let getlisParam = {
        HospitalCode: this.appoInfo.hospitalCode,
        idCard: this.appoInfo.idCard,
        isPositive: false
      }
      getlistResult(getlisParam).then(res => {
        if (res && res.code == 10000) {
          this.appoInfo.listResult = res.content.list
        }
      })
    },
    // 显示阳性对应的中文名字
    getPositive(positive) {
      let findPositives = []
      positive.forEach(element => {
        let elementContent = this.positives.filter(item => item.label === element)
        elementContent.length > 0 ? findPositives.push(elementContent[0].text) : null
      })
      return findPositives.length > 0 ? findPositives.join(', ') : ''
    },
    handleClose() {
      this.visible = false
    },
    highlightedText(diseasesHistory) {
      if (diseasesHistory) {
        return diseasesHistory.replace(/(阳性)/g, '<span style="color: red;">$1</span>')
      } else {
        return diseasesHistory
      }
    },
    getPatAge(age) {
      let ageNum = age ? age.match(/\d+/g) : '' // 匹配数字
      let ageUtils = age ? age.match(/[a-zA-Z]+/g) : '' // 匹配字母（大小写不区分）
      let ageContent = ''
      if (age && age.indexOf('岁') === -1 && ageUtils) {
        // 替换特定字母
        ageUtils = ageUtils.map(ageUtil => {
          switch (ageUtil.toUpperCase()) {
            case 'Y':
              return '岁'
            case 'M':
              return '月'
            case 'D':
              return '天'
            default:
              return ageUtil
          }
        })
        ageContent = ageUtils && ageNum ? ageNum[0] + ageUtils[0] : ''
      } else {
        ageContent = age
      }
      return ageContent
    },
    // handleClick(tab, event) {
    //   console.log(tab, event)
    // },
    frtTime(cellValue) {
      // 处理后台时间
      let time = ''
      if (cellValue) {
        cellValue = cellValue.toString()
        if (cellValue.length > 8) {
          time = cellValue.slice(0, 4) + '-' + cellValue.slice(4, 6) + '-' + cellValue.slice(6, 8) + ' ' + cellValue.slice(8, 10) + ':' + cellValue.slice(10, 12)
        } else {
          time = cellValue.slice(0, 4) + '-' + cellValue.slice(4, 6) + '-' + cellValue.slice(6, 8)
        }
      }
      return time
    },
    frtBETime() {
      if (!this.appoInfo) {
        return ''
      }
      const bt = this.appoInfo.beginTime ? this.appoInfo.beginTime.substring(0, 5) : ''
      const et = this.appoInfo.endTime ? this.appoInfo.endTime.substring(0, 5) : ''
      return `${bt} ~ ${et}`
    },
    frStatus(val) {
      // 已申请、未检查、已报告、已审核、已删除
      switch (val) {
        case '已申请':
          return 'info'
        case '未检查':
          return ''
        case '未审核':
          return 'warning'
        case '已报告':
        case '已审核':
          return 'success'
        case '已删除':
          return 'danger'
        default:
          return 'info'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
// .cont_box{
//   height: calc(100vh - 98px);
//   padding: 0 24px 45px;
//   overflow-y: auto;
// }
.list-change{
  margin-top: 5px;
}
button {
  padding: 10px 20px;
  background-color: white;
  border: 1px solid #ccc;
  /* border-radius: 3px 33px 0px 0px; */
  margin-left: -4px;
  outline: none;
  cursor: pointer;
  color: #666;
}

button:last-child {
  border-radius: 0 5px 5px 0;
}

button.active {
  background-color: #00C0EF;
  border: 1px solid #00C0EF;
  color: white;
  /* border-radius: 5px 0px 0px 5px; */
  /* border-bottom: 1px solid #00C0EF; */
  transition: background-color 0.3s ease;
}
.cont_box{
  height: calc(100vh - 60px);
  padding: 0 24px 45px;
  overflow-y: scroll;
}
</style>
